import React, { Component } from 'react'
import { NavBar, Icon, Carousel, Toast } from 'antd-mobile'
import './GoodDetail.scss'
import myaxios from '../../utils/myaxios'

export default class GoodDetail extends Component {
    state = {
        goodInfo: {},
        imgHeight: 250,
        // 设置轮播图是否显示 默认不显示
        showswiper: false,
        showCollect: false,
    }
    componentDidMount() {
        let { goods_id } = this.props.match.params;
        myaxios
            .get('goods/detail', {
                params: {
                    goods_id,
                }
            })
            .then((res) => {
                console.log(res);
                //  当请求轮播图回来的时候 showswiper true
                this.setState({
                    goodInfo: res,
                    showswiper: true,
                })
            }
            )
            .catch((err) => console.log(err))
        // 初次进入商品详情的时候 判断商品是否被收藏
        let collection_str = localStorage.getItem('collections');
        let collections = JSON.parse(collection_str || '[]');
        // 对收藏进行循环遍历
        // 判断是否在收藏中
        let index = collections.findIndex(v => {
            if (v.goods_id == goods_id) {
                return true;
            }
        })
        if(index!=-1){
            this.setState({
                showCollect:true
            })
        }
    }
    // 收藏的功能
    handleCollect=(params) => {
        // collections代表的是搜藏的数据 数组

        let collections_str = localStorage.getItem('collections');
        let collections = JSON.parse(collections_str||'[]');
        // 对收藏进行循环遍历
        // 判断是否在收藏中
        let index = collections.findIndex(v=>{
            if(v.goods_id === this.state.goodInfo.goods_id){
                return true;
            }
        })
        if(index!=-1){
            // 代表之前收藏过
            collections.splice(index,1);
            Toast.info('取消收藏成功',1);
            this.setState({
                showCollect:false
            })
        }else{
            Toast.info('收藏成功！',1);
            collections.push(this.state.goodInfo);
            this.setState({
                showCollect:true
            })
        }
        localStorage.setItem('collections',JSON.stringify(collections));
    }
    
    gotoCart=(params) => {
        this.props.history.push('/cart')
    }

    // 添加到购物车
    addToCart = (params) => {
        // 先从本地缓存中获取购物车数据
        let carts_str = localStorage.getItem('carts');
        let carts = JSON.parse(carts_str||'[]');
        // 获取goods_id
        let {goods_id} = this.props.match.params;
        let index = carts.findIndex(v=>{
            if(v.goods_id == goods_id){
                return true;
            }
        })
        // index===-1
        if(index===-1){
            let goods_info = this.state.goodInfo;
            goods_info.num = 1;  /* 第一次添加数量是1 */
            goods_info.checked=true; /* 在购物车默认被选中 */
            carts.push(goods_info)
        }else{
            carts[index].num ++; /* 第n次添加 */
        }
        Toast.info('加入购物车成功！',1);
        localStorage.setItem('carts',JSON.stringify(carts));
    }
    
    pay = (params) => {
        this.props.history.push('/pay');
    }
      

    render() {
        return (
            <div className='yg-detail'>
                {/* 导航栏 */}
                <NavBar
                    className="yg-detail-nav"
                    mode="light"
                    icon={<Icon type="left" />}
                    onLeftClick={() => window.history.go(-1)}
                >
                    商品详情
                </NavBar>
                {/* 导航栏 */}
                {/* 轮播图 */}
                <div className="yg-detail-swiper">
                    {this.state.showswiper && (
                        <Carousel infinite autoplay>
                            {this.state.goodInfo.pics &&
                                this.state.goodInfo.pics.map((v) => {
                                    return (
                                        <div
                                            key={v.goods_id}
                                            className="imageWrapper"
                                            style={{
                                                display: "inline-block",
                                                width: "100%",
                                                height: this.state.imgHeight,
                                            }}
                                        >
                                            <img
                                                src={v.pics_mid}
                                                alt=""
                                                style={{ width: "100%", verticalAlign: "top" }}
                                                onLoad={() => {
                                                    // fire window resize event to change height
                                                    window.dispatchEvent(new Event("resize"));
                                                    this.setState({ imgHeight: "auto" });
                                                }}
                                            />
                                        </div>
                                    );
                                })}
                        </Carousel>
                    )}
                </div>
                {/* 轮播图 */}
                {/* 价格分享区 */}
                <div className="yg-detail-price">
                    <div className="price-left">
                        <span className='title1'>￥{this.state.goodInfo.goods_price}</span>
                    </div>
                    <div className="price-right">
                        <i className='iconfont icon-fenxiang'></i>
                        <i className={this.state.showCollect ? 'iconfont icon-shoucang active' : 'iconfont icon-shoucang'} onClick={this.handleCollect}></i>
                    </div>
                </div>
                {/* 价格分享区 */}
                {/* 商品标题 */}
                <div className="yg-detail-title">
                    {this.state.goodInfo.goods_name}
                </div>
                {/* 商品标题 */}
                {/* 图文详情 */}
                <div className="yg-detail-richtext">
                    <div className="richtext-title">
                        图文详情
                    </div>
                    <div className="richtext-content" dangerouslySetInnerHTML={{ __html: this.state.goodInfo.goods_introduce }}>
                    </div>
                </div>
                {/* 图文详情 */}
                {/* 底部工具栏 */}
                <div className="yg-detail-bottom">
                    <div className="bottom-contact">
                        <i className="iconfont icon-lianxikefu"></i>
                        <div className="title">联系客服</div>
                    </div>
                    <div className="bottom-cart" onClick={this.gotoCart}>
                        <i className="iconfont icon-gouwuche"></i>
                        <div className="title">购物车</div>
                    </div>
                    <div className="bottom-addToCart" onClick={this.addToCart}>
                        <div className="title1">加入购物车</div>
                    </div>
                    <div className="bottom-buy" onClick={this.pay}>
                        <div className="title2">立即购买</div>
                    </div>
                </div>
                {/* 底部工具栏 */}
2
            </div>
        )
    }
}

